import { useQuery } from 'react-query';
import { request } from '@/request';
import { getPathByEnv } from '@/utils';
import { useHistory } from 'react-router-dom';
import { useGlobalVar, useLogout } from '@/hooks';
import Username from './Username';
import Notice from './Notice';

type TUserData = {
   phone: string;
   username: string;
   avatar: string;
};
const User = () => {
   const history = useHistory();
   const { logout } = useLogout();
   const { user, refetchUser } = useGlobalVar();

   const goAvatar = () => {
      history.push('/avatar');
   };

   return (
      <div>
         <div className="flex justify-end">
            <Notice />
         </div>
         <div className="h-20 flex items-center">
            <div
               className="w-14 h-14 rounded-full bg-indigo-100 mr-4 overflow-hidden shadow-md"
               onClick={goAvatar}
            >
               <img src={getPathByEnv(user.avatar)} />
            </div>
            <Username value={user.username} onSubmit={refetchUser} />
         </div>
         <div className="flex flex-col gap-4 mt-4 text-indigo-800">
            <div>
               <div>历史足迹</div>
               <div className="box p-2">lalala</div>
            </div>
            <div>
               <div>历史消费</div>
               <div className="box p-2">lalala</div>
            </div>
            <div onClick={logout}>退出</div>
         </div>
      </div>
   );
};
export default User;
